{include file="public/head"/}
<link rel="stylesheet" href="__PUBLIC__phone/css/business.css"/>
<body>
<!--头部-->
<header id="headers">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a href="javascript:;" class="leftRuted glyphicon glyphicon-menu-left pull-left" ></a>
                <p>业务续费</p>
            </div>
        </div>
    </div>
</header>
<!-- 业务续费-续费 -->
<div class="business normalBox">
    <div class="container businwrap">
        <ul class="renUls">
            <li>
                <span class="renls">ICCID：</span>
                <span class="renrs">{$iccid}</span>
            </li>
            <li>
                <span class="renls">套餐规格：</span>
                <span class="renrs"><i>{$card.operator_type}</i> <i>{$card.total}/{$card.pkg_kind_text}</i> <i>￥{$card.pkg_price}元</i></span>
            </li>
            <li>
                <span class="renls">续费周期：</span>
                {if condition="$card['pkg_kind'] eq '0'"}
                <div class="cycle">
                    {volist name="card.renew_type" id="re" key="k"}
                    <div data-cycle="{$re.cycle}" {if condition="$k eq '1'"} class="cywrap active" {else/} class="cywrap" {/if}>
                    <p>{$re.cycle}个月</p>
                    <p>￥{$re.price}</p>
                    <span class="tri"></span>
                </div>
                {/volist}
    </div>
    {else/}
    <span class="norspan"> * 跨月套餐默认续费一周期</span>
    {/if}
    </li>
    <li>
        <span class="norspan">应付金额(元):</span>
        {if condition="$card['pkg_kind'] eq '0'"}
        <span class="norspan" id="payable">￥{$card.renew_type[0]['price']}</span>
        {else/}
        <span class="norspan" id="payable">￥{$card.pkg_price}</span>
        {/if}
    </li>
    <li>
        充值方式：
        <span class="btn btn-default active">微信</span>
        <!--<span class="btn btn-default" onclick="reminder('支付宝功能开发中');" style="background: gray;">支付宝</span>-->
    </li>
    <li>
        <a class="sure" data-toggle="modal">确定</a>
    </li>
    </ul>
</div>
</div>
<!--弹出层-->
<div class="modal fade" id="renewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body text-center">
                <img src="__PUBLIC__phone/images/yes.png" alt=""/>
                <p>续费成功</p>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        // 支付方式切换
//        $(".btn").click(function(){
//            $(this).addClass("active").siblings(".btn").removeClass("active")
//        })
        // 选择续费周期
        $(".cycle").on('click','.cywrap',function(){
            $(this).addClass("active").siblings(".cywrap").removeClass("active");
            $('#payable').text($(this).find('p:last').text());
        })

        // 确定续费
        $('.renUls').on('click','.sure',function(){
            var iccid = "<?php echo $iccid; ?>";
            var type = "<?php echo $card['pkg_kind']; ?>";
            var cycle = 1;
            if(type == '0'){
                cycle = $('.cycle').find('.active').data('cycle');
            }
            if(!/^[1-9]+$/.test(cycle)){
                reminder('请选择续费周期');
                return false;
            }
            $.post("{:url('/home/Quick/confirmRenew')}",{'iccid':iccid,'cycle':cycle},function(data){
                if(data.code == '0'){
                    callpay(data.msg);
                } else {
                    reminder(data.msg);
                }
            })
        })

        // 弹窗完全隐藏的后触发
//        $('#renewModal').on('hidden.bs.modal',function(){
//            window.location.href = "{:url('/home/Renew/index')}";
//        })
    })

    function callpay(data)
    {
        if (typeof(WeixinJSBridge) == "undefined"){
            if( document.addEventListener ){
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
            }else if (document.attachEvent){
                document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
            }
        }else{
            jsApiCall(data);
        }
    }

    //调用微信JS api 支付
    function jsApiCall(data)
    {
        WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                {
                    "appId":data.appId,     //公众号名称，由商户传入
                    "timeStamp":data.timeStamp,         //时间戳，自1970年以来的秒数
                    "nonceStr":data.nonceStr, //随机串
                    "package":data.package,
                    "signType":"MD5",         //微信签名方式：
                    "paySign":data.paySign //微信签名
                },
                function(res){
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        location.href = "http://"+window.location.host+"/home/Quick/index";
                    } else {
                        if (res.err_msg == "get_brand_wcpay_request:cancel") {
                            reminder('您取消了微信支付');
                        } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                            reminder('微信支付失败');
                        }
                    }
                }
        );
    }

</script>
</body>
</html>